
<template>
  <div>
    <el-header
      style="height: 80px;display: flex;align-items: center;justify-content: space-between;border-bottom: 2px solid #ccc;">
      <div style="margin-left: 20px; margin-top: 10px; display: flex;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane name="first" v-loading="listLoading">
            <span slot="label" style="font-size: 20px;">课程</span>
          </el-tab-pane>
          <el-tab-pane name="second">
            <span slot="label" style="font-size: 20px;">任务</span>
          </el-tab-pane>
          <!-- <el-tab-pane name="third">
            <span slot="label" style="font-size: 20px;">教学评价</span>
          </el-tab-pane> -->
        </el-tabs>
        <div style="margin-left: 60px;margin-top: 3px;">
          <el-input placeholder="输入关键字搜索" v-model="keyword" @keyup.enter.native="find">
            <el-button slot="append" @click="find" style="color: #cceabb;font-size: 18px;">
              <i class="el-icon-search"></i>
            </el-button>
          </el-input>
        </div>
      </div>
      <UserAcatar @transfer="change" />
    </el-header>
    <div class="container" style="display: flex;justify-content: space-between;">
      <!-- tabs -->
      <div>
        <!-- <div style="margin-left: 40px;margin-top: 40px;width: 200px;">
        <el-input placeholder="输入关键字搜索" v-model="keyword" @keyup.enter.native="find">
          <el-button slot="append" @click="find" style="color: #cceabb;font-size: 18px;">
            <i class="el-icon-search"></i>
          </el-button>
        </el-input>
      </div> -->
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 0px;">
          <el-tab-pane label="" name="first" v-loading="listLoading" disabled>
            <div class="content">
              <!-- 主页面 -->
              <div class="courses" v-if="!courseList"
                style="display: flex;justify-content: center;align-items: center;color: #ccc;height: 400px;">
                <span>暂无课程</span>
              </div>
              <div class="courses" v-else>
                <el-col :span="8" v-for="(item, i) in courseList" :key="item.course_id + i" class="course">
                  <el-card :body-style="{ padding: '0px' }">
                    <div class="imgbox" @click="goDetail(item)">
                      <i v-if="!item.course_image" class="el-icon-picture-outline"></i>
                      <el-image v-else class="courseimg" :src="item.course_image" fit="contain" />
                    </div>
                    <div style="padding: 3px;cursor: pointer;">
                      <el-tooltip :content="item.course_name" placement="bottom" effect="light">
                        <span
                          style="display:inline-block;max-width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                          {{ item.course_name }}
                        </span>
                      </el-tooltip>
                    </div>
                  </el-card>
                </el-col>
              </div>

              <!-- 分页 -->
              <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                  :page-size="pageSize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
              </div>

            </div>
          </el-tab-pane>
          <el-tab-pane name="second">
            <div style="width:830px; height: 580px;display: flex;">
              <div style="display: flex;flex-direction: column;align-items: center;">
                <div style="height: 500px;width: 790px;display: flex;justify-content: center;align-items: center;"
                  v-if="!assList || assList.length == 0">
                  暂无任务
                </div>
                <div style="height: 500px;width: 790px;display: flex;flex-wrap: wrap;overflow: auto;" v-else>
                  <el-col :span="8" v-for="(item) in assList" :key="item.assignment_id" style="width: 380px;margin: 6px;">
                    <el-card class="box-card">
                      <div slot="header" class="clearfix" style="display: flex;align-items: center;position: relative;">
                        <el-popover placement="top-start" width="160" trigger="hover" :content="item.assignment_title">
                          <span slot="reference"
                            style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 120px;display: inline-block;">
                            {{ item.assignment_title }}
                          </span>
                        </el-popover>
                        <el-tag size="mini" style="float: right;margin-left: 20px;"
                          v-if="new Date(item.publish_time) > Date.now()">
                          未开始
                        </el-tag>
                        <el-tag type="warning" size="mini" style="float: right;margin-left: 20px;"
                          v-if="new Date(item.deadline) < new Date()">
                          已截止
                        </el-tag>
                        <el-tag type="success" size="mini" style="float: right;margin-left: 20px;"
                          v-if="item.correction_status == 'true' && item.submit_status == 'published'">
                          已批阅
                        </el-tag>
                        <el-tag type="danger" size="mini" style="float: right;margin-left: 20px;"
                          v-if="item.correction_status == 'false' && item.submit_status == 'published'">
                          待批阅
                        </el-tag>
                        <!-- <el-button
                        style="position: absolute;right: 5px;" type="text">查看</el-button> -->
                      </div>
                      <div class="text item">
                        {{ '课程: ' + item.course_name }}
                      </div>
                      <div class="text item">
                        {{ '提交人数: ' + item.publish_number }}
                      </div>
                      <div class="text item">
                        {{ '发布时间: ' + item.publish_time }}
                      </div>
                      <div class="text item">
                        {{ '截止时间: ' + item.deadline }}
                      </div>
                    </el-card>
                  </el-col>

                </div>

                <!-- 分页 -->
                <div class="block">
                  <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                    :page-size="pageSize" layout="total, prev, pager, next" :total="total">
                  </el-pagination>
                </div>
              </div>
            </div>

          </el-tab-pane>
          <el-tab-pane label="" name="third" v-loading="listLoading" disabled>
            <div id="main" style="width: 790px; height: 550px;margin-top: 0px;"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 用户信息 -->
      <div class="info">
        <img v-if="!userInfo.avatar" class="img" :src="squareUrl" />
        <el-image v-else class="img"
          :src="`http://localhost:3000/image/getavatar/${encodeURIComponent(userInfo.avatar)}`" />

        <div class="msg">

          <div style="margin:5px 0;">
            <span
              style="display:inline-block;width: 400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 26px;">
              姓名: {{ userInfo.teacher_name }}
            </span>
          </div>

          <div style="font-size: 23px;margin: 5px 0;">
            <span style="display:inline-block;width: 400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
              组织: {{ userInfo.institute_name }}
            </span>
          </div>

          <div style="display: flex;align-items: center;margin: 5px 0;">
            <span
              style="display:inline-block;max-width: 400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-right: 10px;font-size: 17px;">
              昵称: {{ userInfo.user_name }}
            </span>
            <i class="el-icon-edit" style="cursor: pointer;color: #cceabb;" @click="editName"></i>
          </div>

          <div style="display: flex;align-items: center;margin: 5px 0;">
            <el-popover placement="top-start" width="300" trigger="hover" :content="userInfo.signature">
              <span slot="reference"
                style="display:inline-block;max-width: 380px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 8px 10px 8px 0;font-size: 17px;">
                个性签名: {{ userInfo.signature }}
              </span>
            </el-popover>
            <i class="el-icon-edit" style="cursor: pointer;color: #cceabb;" @click="editSig"></i>
          </div>

          <div style="display: flex;align-items: center;">
            <el-popover placement="top-start" width="300" trigger="hover" :content="userInfo.teacher_experience">
              <span slot="reference"
                style="display:inline-block;max-width: 380px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 0 10px 0 0;font-size: 17px;">
                教师经历: {{ userInfo.teacher_experience }}
              </span>
            </el-popover>
            <i class="el-icon-edit" style="cursor: pointer;color: #cceabb;" @click="editEx"></i>
          </div>

        </div>

      </div>
      <!-- 修改用户信息弹框 -->
      <el-dialog title="修改用户信息" :visible.sync="dialogUser" :show-close='false'>
        <el-form :model="userForm" status-icon :rules="rules" ref="userForm">
          <el-form-item prop="user_name" label="昵称" v-if="option == 'user_name'">
            <el-input v-model="userForm.user_name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item prop="signature" label="个性签名" v-if="option == 'signature'">
            <el-input v-model="userForm.signature" autocomplete="off" type="textarea" :rows="3"></el-input>
          </el-form-item>

          <el-form-item prop="teacher_experience" label="教师经历" v-if="option == 'teacher_experience'">
            <el-input v-model="userForm.teacher_experience" autocomplete="off" type="textarea" :rows="4"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogUser = false">取 消</el-button>
          <el-button type="primary" @click="changeInfo('userForm')">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>


<script>
import UserAcatar from "@/components/UserAcatar.vue"; //引入组件

export default {
  name: "StudentPersonal",
  components: {
    UserAcatar
  },
  data() {
    return {
      // new
      userInfo: {},
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      dialogUser: false,
      option: '',
      userForm: {
        user_name: '',
        signature: '',
        teacher_experience: ''
      },
      rules: {
        user_name: [
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ],
        signature: [
          { required: true, message: '个性签名不能为空', trigger: 'blur' }
        ],
        teacher_experience: [
          { required: true, message: '教师经历不能为空', trigger: 'blur' }
        ]
      },
      currentPage: 1,
      pageSize: 9,
      total: 9,
      courseList: null,
      activeName: 'first',
      assList: null,
      listLoading: true,
      keyword: '',
      tag: '',
      course_id: '',
    }
  },
  async mounted() {
    this.userInfo = {
      ...JSON.parse(JSON.stringify(this.$store.state.user_info))
    };
    await this.getCourse();
    this.echartsInit()
  },

  methods: {
    // 初始化echarts
    echartsInit() {
      this.$echarts.init(document.querySelector('#main')).setOption({
        legend: {},
        tooltip: {
          trigger: 'axis',
          showContent: true
        },
        dataset: {
          source: [
            ['product', '2018', '2019', '2020', '2021', '2022', '2023'],
            ['前端性能与工程化', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ['Hybrid混合开发', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ['c语言', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ['面向对象程序设计', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'pie',
            id: 'pie',
            radius: ['23%', '40%'],
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self'
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 3
            },
            label: {
              formatter: '{b}: {@2018}',
              show:false,
              position: 'center',
              fontSize: 20,
              fontWeight: 'bold',
            },
            emphasis: {
              label: {
                show:true,
                formatter: '{b}: {@2018}',
              }
            },
            encode: {
              itemName: 'product',
              value: '2018',
              tooltip: '2018'
            }
          }
        ]
      })
    },
    editName() {
      this.dialogUser = true
      this.option = 'user_name'
      this.userForm.user_name = this.userInfo.user_name
      this.userForm.signature = this.userInfo.signature
      this.userForm.teacher_experience = this.userInfo.teacher_experience
    },
    editSig() {
      this.dialogUser = true
      this.option = 'signature'
      this.userForm.user_name = this.userInfo.user_name
      this.userForm.signature = this.userInfo.signature
      this.userForm.teacher_experience = this.userInfo.teacher_experience
    },
    editEx() {
      this.dialogUser = true
      this.option = 'teacher_experience'
      this.userForm.user_name = this.userInfo.user_name
      this.userForm.signature = this.userInfo.signature
      this.userForm.teacher_experience = this.userInfo.teacher_experience
    },
    // 修改信息
    changeInfo(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          if (this.userForm[this.option] == this.userInfo[this.option]) {
            this.$message.info('content repetition')
          } else {
            let res = await this.$axios.post('/personal/changeinfo', { ...this.userForm, user_id: this.userInfo.user_id, user_auth: this.userInfo.user_auth, option: this.option })
            console.log(res);
            if (res.code == 200) {
              this.userInfo = { ...this.userInfo, ...this.userForm }
              let result = await this.$axios.post('/mycourse/submit', { user_id: this.userInfo.user_id, user_auth: this.userInfo.user_auth, user_name: this.userInfo.user_name })
              if (result.code == 200) {
                localStorage.setItem("token", result.token);
                localStorage.setItem("refreshtoken", result.refreshToken);
                localStorage.setItem("userInfo", result.user_info);
                let reslut = await this.$axios.post("/login/userInfo", { user_info: localStorage.getItem("userInfo") });
                this.$store.commit("setUser", reslut.user_info);
                this.userInfo = {
                  ...JSON.parse(JSON.stringify(this.$store.state.user_info))
                };
              }
            }
          }
        } else {
          this.$message.error('存在未填项')
          return false;
        }
      });
      this.dialogUser = false
    },
    // 切换
    async handleClick(tab, event) {
      console.log(tab.name, event);
      if (tab.name == 'first') {
        this.currentPage = 1
        this.pageSize = 9
        this.listLoading = true
        await this.getCourse()
      }
      if (tab.name == 'second') {
        this.currentPage = 1
        this.pageSize = 4
        this.tag = 'assign'
        this.listLoading = true
        await this.getAssignment()
      }
    },
    // 获取数据库数据--课程
    async getCourse() {
      let res = await this.$axios.post('/personal/gitcoursebyid', { currentPage: this.currentPage, id: this.userInfo.user_auth == 'student_per' ? this.userInfo.student_id : this.userInfo.teacher_id, auth: this.userInfo.user_auth })
      console.log(res);
      if (res.code == 200) {
        this.total = res.total
        this.courseList = res.list.map(item => {
          if (item.course_image) {
            return { ...item, course_image: `http://localhost:3000/image/getcourseimage/${encodeURIComponent(item.course_image)}` }
          }
          else {
            return item
          }
        })
        this.listLoading = false
      }
    },
    // 当前页
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      console.log(this.activeName);
      if (this.activeName == 'first') {
        this.listLoading = true
        this.pageSize = 9
        await this.getCourse()
      }
      if (this.activeName == 'second') {
        this.listLoading = true
        this.pageSize = 4
        if (this.tag == 'assign') {
          await this.getAssignment()
        }
        if (this.tag == 'detail') {
          let res = await this.$axios.post('/personal/getassbycid', { auth: this.userInfo.user_auth, id: this.userInfo.user_auth == 'student_per' ? this.userInfo.student_id : this.userInfo.teacher_id, course_id: this.course_id, currentPage: this.currentPage })
          console.log(res);
          if (res.code == 200) {
            this.assList = res.list
            this.total = res.total
            this.pageSize = 4
            this.listLoading = false
          }
        }
      }
    },
    // 头像中介函数
    change(msg) {
      if (msg == 'update') {
        this.userInfo = {
          ...JSON.parse(JSON.stringify(this.$store.state.user_info))
        };
      }
      this.$emit("transfer", msg);
    },
    // 获取任务
    async getAssignment() {
      let res = await this.$axios.post('/personal/getassignment', { auth: this.userInfo.user_auth, id: this.userInfo.user_auth == 'student_per' ? this.userInfo.student_id : this.userInfo.teacher_id, currentPage: this.currentPage })
      console.log(res);
      if (res.code == 200) {
        this.assList = res.list
        this.total = res.total
        this.pageSize = 4
        this.listLoading = false
      }
    },
    // 搜索框
    async find() {
      if (this.activeName == 'first') {
        this.listLoading = true
        if (this.keyword == '') {
          await this.getCourse()
          this.$message.error('请输入关键字进行查找!')
        } else {
          // 搜索课程
          let res = await this.$axios.post('/mycourse/tfindcourse', { keyword: this.keyword, currentPage: this.currentPage, grade_id: '', id: this.userInfo.teacher_id })
          console.log(res);
          if (res.code == 200) {
            this.total = res.total;
            this.courseList = res.List.map(item => {
              if (item.course_image) {
                return { ...item, course_image: `http://localhost:3000/image/getcourseimage/${encodeURIComponent(item.course_image)}` }
              }
              else {
                return item
              }
            });
            if (res.total == 0) {
              this.$message.error(res.msg)
            } else {
              this.$message.success(res.msg)
            }
            this.keyword = '';
            this.listLoading = false
          } else {
            this.listLoading = false
            this.$message.error(res.msg)
          }
        }
      }
      if (this.activeName == 'second' && this.tag == 'assign') {
        this.listLoading = true
        if (this.keyword == '') {
          await this.getAssignment()
          this.$message.error('请输入关键字进行查找!')
        } else {
          // 搜索该学生的任务
          let res = await this.$axios.post('/personal/findassignment', { keyword: this.keyword, auth: this.userInfo.user_auth, id: this.userInfo.user_auth == 'student_per' ? this.userInfo.student_id : this.userInfo.teacher_id, currentPage: this.currentPage })
          console.log(res);
          if (res.code == 200) {
            if (res.total == 0) {
              this.$message.info('未搜索到相关信息')
            }
            this.assList = res.list
            this.total = res.total
            this.listLoading = false
            this.keyword = ''
          }
        }
      }
      if (this.activeName == 'second' && this.tag == 'detail') {
        this.listLoading = true
        if (this.keyword == '') {
          await this.getAssignment()
          this.$message.error('请输入关键字进行查找!')
        } else {
          // 搜索某课程任务
          let res = await this.$axios.post('/personal/findcassignment', { keyword: this.keyword, auth: this.userInfo.user_auth, id: this.userInfo.user_auth == 'student_per' ? this.userInfo.student_id : this.userInfo.teacher_id, currentPage: this.currentPage, course_id: this.course_id })
          console.log(res);
          if (res.code == 200) {
            if (res.total == 0) {
              this.$message.info('未搜索到相关信息')
            }
            this.assList = res.list
            this.total = res.total
            this.listLoading = false
            this.keyword = ''
          }
        }
      }
    },
    // 点击课程
    async goDetail(item) {
      console.log(item);
      this.tag = 'detail'
      this.course_id = item.course_id
      this.activeName = 'second'
      this.listLoading = true
      let res = await this.$axios.post('/personal/getassbycid', { auth: this.userInfo.user_auth, id: this.userInfo.user_auth == 'student_per' ? this.userInfo.student_id : this.userInfo.teacher_id, course_id: item.course_id, currentPage: this.currentPage })
      console.log(res);
      if (res.code == 200) {
        this.assList = res.list
        this.total = res.total
        this.pageSize = 4
        this.listLoading = false
      }
    }
  },
  created() {

  },
}

</script>

<style scoped>
/* new */
.img {
  width: 150px;
  height: 150px;
  border-radius: 20px;
}

.el-tabs /deep/ .el-tabs__nav-wrap::after {
  background-color: white;
}

.info {
  display: flex;
  flex-direction: column;
  padding: 15px;
  /* margin-top: 50px; */
  /* border: 1px solid #CCEABB; */
  width: 410px;
}

.el-card:hover {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
  transition: transform 0.2s ease-in-out;
}

.msg {
  margin-top: 30px;
  /* padding: 6px; */
}

.content {
  height: 500px;
  width: 790px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.courses {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.course {
  max-width: 180px;
  margin: 15px 40px;
}

.imgbox {
  width: 180px;
  height: 80px;
  background-color: #ccc;
  font-size: larger;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* 任务卡片 */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 8px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 380px;
}
</style>